import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { GraphChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { useEffect, useRef } from 'react';
import webkitDep from './graph';

echarts.use([
  TooltipComponent,
  LegendComponent,
  GraphChart,
  CanvasRenderer,
  LabelLayout
]);

function App() {
  const ref = useRef(null)
  const nodeRef = useRef(null);

  useEffect(() => {
    const option = {
      legend: {
        data: ['HTMLElement', 'WebGL', 'SVG', 'CSS', 'Other']
      },
      series: [
        {
          type: 'graph',
          layout: 'force',
          animation: false,
          edgeSymbol: ['none', 'arrow'],
          edgeSymbolSize: [4, 10],
          label: {
            position: 'right',
            formatter: '11{b}'
          },
          roam: true,
          draggable: false, //是否可拖动
          data: webkitDep.nodes.map(function (node, idx) {
            node.id = idx;
            return node;
          }),
          categories: webkitDep.categories,
          force: {
            edgeLength: 500, //边缘长度
            repulsion: 200, //排斥力
            gravity: 0, //重力
            layoutAnimation:false
          },
          edges: webkitDep.links,
          lineStyle: {
            color: 'source',
            curveness: 0.3
          },
        }
      ]
    };
    const myChart = echarts.init(ref.current);
    myChart.on('mouseover', function (e) {

      if (nodeRef.current === null) {
        myChart.dispatchAction({
          type: 'downplay',
          dataIndex: e.dataIndex,
        })
      } else {
        myChart.dispatchAction({
          type: 'highlight',
          dataIndex: nodeRef.current,
        })
      }
    })
    myChart.on('mouseout', { dataType: 'node' }, function (e) {
      if (nodeRef.current !== null) {
        myChart.dispatchAction({
          type: 'highlight',
          dataIndex: nodeRef.current,
        })
      }
    });
    myChart.on('mouseout', { dataType: 'edge' }, function (e) {
      if (nodeRef.current !== null) {
        myChart.dispatchAction({
          type: 'highlight',
          dataIndex: nodeRef.current,
        })
      }
    });
    myChart.on('selectchanged', { dataType: 'node' }, function (e) {
      const { fromAction, selected } = e;
      if (fromAction === "select") {
        nodeRef.current = selected[0].dataIndex[0];
        myChart.dispatchAction({
          type: 'highlight',
          dataIndex: nodeRef.current,
        })
      } else {
        myChart.dispatchAction({
          type: 'downplay',
          dataIndex: nodeRef.current,
        })
        nodeRef.current = null;
      }
    });

    myChart.showLoading();

    setTimeout(() => {
      myChart.hideLoading();
      myChart.setOption(option);
    }, 0)

  }, [])
  return (
    <div className="demo-container" ref={ref}/>
  );
}

export default App;
